<template>
  <div class="container">
    <!-- 内容 -->
    <div class="main">
      <!-- 面包屑 -->
      <div class="Breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/post' }"
            >旅游攻略</el-breadcrumb-item
          >
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 文章详情 -->
      <div class="article">
        <div class="title">
          <h1>{{ this.article.title }}</h1>
        </div>
        <div class="time">
          <span>攻略：2019-05-22 10:57 </span>
          <span>阅读：{{ this.article.watch }}</span>
        </div>
        <div class="content">
          <div v-html="this.article.content"></div>
        </div>
      </div>
      <div class="edit-share">
        <div class="edit">
          <i class="el-icon-edit"></i>
          <p v-if="this.article.comments">
            评论({{ this.article.comments.length }})
          </p>
        </div>
        <div class="share">
          <i class="el-icon-share"></i>
          <p>分享</p>
        </div>
      </div>
      <Commentltem
        :post="id"
        :pageIndex="pageIndex"
        :pageSize="pageSize"
        @getTotal="thisTotal"
      />

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 右侧 -->
    <div class="aside">
      <p>相关攻略</p>
      <div
        v-for="value in recommend"
        :key="value.id"
        @click="onclick(value.id)"
      >
        <div class="box">
          <div class="aside-left" v-if="value.images.length > 0">
            <img :src="value.images[0]" alt="" />
          </div>

          <div class="aside-right">
            <span>{{ value.title }}</span>
            <span
              >{{ timestampToTime(value.updated_at) }}&nbsp;&nbsp; 阅读：{{
                value.watch
              }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommend: [],
      article: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      id: ""
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
    },
    thisTotal(val) {
      this.total = val;
    },

    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // let Y = date.getFullYear() + '-';
      // let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      // let D = date.getDate() + ' ';
      // let h = date.getHours() + ':';
      // let m = date.getMinutes() + ':';
      // let s = date.getSeconds();
      // return Y+this.padLeftZero(M)+this.padLeftZero(D)+this.padLeftZero(h)+this.padLeftZero(m)+this.padLeftZero(s);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    onclick(id) {
      this.id = id;

      this.getposts();
      this.$router.push({
        path: `/post/tourdetails?id=${id}`
      });
    },
    getposts() {
      this.$axios({
        url: `/posts`,
        params: { id: this.$route.query.id }
      }).then(res => {
        this.article = res.data.data[0];

        console.log(this.article);
      });
    }
  },
  mounted() {
    this.getposts();
    this.id = this.$route.query.id;

    this.$axios({
      url: `/posts/recommend`,
      params: { id: this.$route.query.id }
    }).then(res => {
      if (res.status == 200) {
        console.log(res);
        this.recommend = res.data.data;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
  display: flex;

  .main {
    width: 700px;
    .article {
      .title {
        padding: 20px 10px;
        border-bottom: 1px solid #ddd;
      }
      .time {
        padding: 10px;
        color: #999;
        text-align: right;

        span {
          margin-left: 10px;
        }
      }
      .content {
        /deep/ img {
          max-width: 700px !important;
          margin: 10px 0;
        }
      }
    }
    .edit-share {
      display: flex;
      justify-content: center;
      padding: 50px 0 30px 0;
      .el-icon-edit::before,
      .el-icon-share::before {
        color: #ffa500;
        font-size: 28px;
      }
      .edit,
      .share {
        margin: 0 20px;
        cursor: pointer;
      }
      p {
        font-size: 14px;
        color: #999999;
      }
    }
  }
  .aside {
    width: 280px;
    margin-left: 20px;
    border-collapse: collapse;
    p {
      padding: 10px;
      border-bottom: 1px solid #999;
    }
    .box {
      cursor: pointer;
      padding: 20px 0;
      display: flex;
      border-bottom: 1px solid #999;
    }
    .aside-left {
      img {
        width: 100px;
        height: 80px;
        margin-right: 10px;
      }
    }
    .aside-right {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 10px;
    }
  }
}
</style>
